<template>
	<view class="container">
		<view class="header">
			<view style="padding: 20rpx">门店列表</view>
		</view>

		<view class="shop-list">
			<ShopItem v-for="(shop, index) in shopList" :shop="shop" :key="index" @tap="selectShop(index)">
				<template slot="select">
					<view style="width: 70rpx">
						<Selected :selected="shop.selected"></Selected>
					</view>
				</template>
			</ShopItem>
		</view>

		<view style="height: 100rpx">
			<view class="submit-wrapper">
				<text class="submit" @tap="navIndex()">进入商城</text>
			</view>
		</view>
	</view>
</template>

<script>
import { listShop } from '@/api/shop';
import locationUtil from '@/utils/location.js';
import ShopItem from '@/components/shop-item.vue';
import Selected from '@/components/selected';
import { mapGetters } from 'vuex';
export default {
	components: {
		ShopItem,
		Selected
	},
	onShow() {
		this.getLocation();
	},
	data() {
		return {
			shopList: [],
			selectedShopIdx: -1
		};
	},
	computed: {
		...mapGetters(['appId'])
	},
	methods: {
		/**
		 * 获取门店列表，并按照定位距离排列
		 */
		getLocation() {
			locationUtil.getLocation().then((coordinate) => {
				listShop(this.appId).then((res) => {
					console.log(res);
					this.shopList = res.data;
					this.shopList.forEach((shop) => {
						const lon1 = coordinate.longitude;
						const lat1 = coordinate.latitude;
						console.log(shop);
						const lon2 = shop.longitude;
						const lat2 = shop.latitude;
						shop.distance = locationUtil.getDistanceFromLatLonInKm(lon1, lat1, lon2, lat2);

						// 以响应式的方法给shopItem加上选择按钮，不能使用shop.selected = false,这样不会触发vue响应式
						this.$set(shop, 'selected', false);
					});
				});
			});
		},

		/**
		 * 选择门店
		 * @param {Object} index
		 */
		selectShop(index) {
			if (this.shopList[index].selected) {
				this.shopList[index].selected = false;
				this.selectedShopIdx = -1;
				return;
			}
			this.shopList.forEach((shop) => {
				shop.selected = false;
			});
			this.shopList[index].selected = true;
			this.selectedShopIdx = index;
		},
		navIndex() {
			if (this.selectedShopIdx === -1) {
				uni.showToast({
					title: '请选择要进入的门店',
					mask: true,
					icon: 'none',
					duration: 1000
				});
				return;
			}
			let selectedShop = this.shopList[this.selectedShopIdx];
			let shop = {
				id: selectedShop.id,
				name: selectedShop.name,
				startTime: selectedShop.startTime,
				endTime: selectedShop.endTime,
				address: selectedShop.address,
				logoImage: selectedShop.logoImage,
				notice: selectedShop.notice
			};
			uni.setStorageSync('shop', shop);
			this.$store.dispatch('shop/setShop', shop);

			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	}
};
</script>

<style>
page {
	background-color: #f5f5f5;
}
</style>

<style scoped lang="less">
@theme-color: #ff5a14;
.container .header {
	background-color: #fff;
}

.container .shop-list {
	margin-top: 20rpx;
	background-color: #fff;
}

.submit-wrapper {
	position: fixed;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 50rpx;
	padding: 0 10%;
	text-align: center;
	color: #fff;

	.submit {
		display: block;
		width: 100%;
		background-color: @theme-color;
		padding: 25rpx 0;
		border-radius: 100rpx;
	}
}
</style>
